<template>
  <dv-charts :option="option"/>
</template>

<script>

  export default {
    name: 'salaryByWorkYear',
    props: {
      salaryByWorkYear: {
        default: function () {
          return [0, 0, 0, 0, 0, 0]
        }
      }
    },
    data() {
      return {
        option: {

          xAxis: {
            name: '工作年限',
            data: ['不限', '应届', '3年以下', '3-5年', '5-10年', '10年+'],
            splitLine: {
              show: false
            }
          },
          yAxis: {
            name: '平均薪资',
            data: 'value',
            splitLine: {
              show: false
            }
          },
          series: [
            {
              data: [1200, 2230, 1900, 2100, 3500, 4200],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            }
          ]
        }

      };
    },
    methods: {
      drawBarChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('echartContainer5'));
        // 绘制基本图表

        //加载动画
        // myChart.showLoading();
        myChart.setOption(this.option);

        //             myChart.hideLoading();

      }
    },
    watch: {
      salaryByWorkYear: function () {
        if (!this.salaryByWorkYear) {
          return false
        }

        console.info("SalaryByWorkYear Changed");

        this.option = {
          title: {
            text: '工作年限和薪资分析'
          },
          xAxis: {
            name: '工作年限',
            data: ['不限', '应届', '3年以下', '3-5年', '5-10年', '10年+'],
            axisLine: {
              show: false
            }
          },
          yAxis: {
            name: '平均薪资',
            data: 'value',
            axisLine: {
              show: false
            }
          },
          series: [
            {
              data: this.salaryByWorkYear,
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            }
          ]
        }
      }


    },
    mounted() {
      //调用drawBarChart()
      this.drawBarChart();
    }
  };
</script>
<style scoped>
  #echartContainer5 {
    width: 100%;
    height: 100%;
  }
</style>
